<template>

  <div  class="box">
        <header>
            <van-icon name="arrow-left" size="20" @click="back"/>
            <span>课程详情</span>
            <van-icon name="ellipsis" size="20"/>
        </header>
        <div class="nav">
            <p>{{list.title}}</p>
            <p>免费</p>
            <p>共{{list.sales_num}}课时|有{{list.total_periods}}人报名</p>
            <van-icon name="star-o" size="20"/>
        </div>
        <div class="team">
            <p>教学团队</p>
        </div>
        <div class="introduce">
            <p>课程介绍</p>
            <p v-html="list.course_details"></p>
        </div>
        <div class="outline">
            <p>课程大纲</p>
            <p  v-html="list.course_details"></p>
            <p>{{list.classify_title}}</p>
        </div>
        <div class="comment">
            <p>课程评论</p>
        </div>
        <button class="btn">立即报名</button>
  </div>
</template>

<script>
// import { list } from "@/request/api"; 
import {list } from "@/request/http";
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
export default {
    data() {
        return {
            list: [],
            activeName: 'a'
        };
    },
    methods: {
        ...mapMutations(['course1','course2']),
        back(){
            this.$router.go(-1);
            this.course2()
        },
        save() {
            list({ id: this.$route.query.id }).then(res => {
                // this.list = res.data.info;
                // console.log(res.data.info);
                // console.log(this.$route.query.id);
                this.list = res.data.info;
            });
        }
    },
    mounted() {
        this.save();
    }
};
</script>

<style lang="scss" scoped>
// #aa {
//   width: 100%;
// }
// .heaa {
// background: linear-gradient(180deg,#63b7fe,#4e7de3);

//   height: 110px;
//   ul {
//     // background: rebeccapurple;
//     height: 40px;
//     display: flex;
//     justify-content: space-between;
//     font-family: PingFangSC-Medium;

//     font-weight: 500;
//     color: white;
//     li {
//       line-height: 40px;
//       font-size: 20px;
//     }
//   }
// }
// .hemp{
//     width: 95%;
//     background: white;
//     height: 100px;
//     margin: 0 auto;
//     position: relative;
//     top: -60px;
//     border-radius: 5px;
// }
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.box{
    width:100%;
    height:100vh;
    background: #F0F2F5;
}
header{
    width:100%;
    border-bottom:1px solid;
    height:42px;
    display:flex;
    text-align:center;
    padding-top: 5px;
    background:white;
    .van-icon{
        flex:1
    }
    span{
        flex:4;
        font-size:20px;
    }
}
.nav{
    width:100%;
    height:90px;
    background:white;
    position: relative;
    p{
        line-height: 25px;
        font-size: 15px;
        margin-left: 15px;
    }
    .van-icon{
        position: absolute;
        right: 10px;
        top: 5px;
    }
}
.team{
    width: 100%;
    height: 118px;
    background: white;
    margin-top: 15px;
    p{
        margin-left: 10px;
    }
}
.introduce{
    width: 100%;
    height: 60px;
    background: white;
    margin-top: 15px;
    p{
        margin-left: 10px;
        line-height: 25px;
    }
}
.outline{
    width: 100%;
    height: 92px;
    background: white;
    margin-top: 15px;
    p{
        margin-left: 10px;
        line-height: 25px;
    }
}
.comment{
     width: 100%;
    height: 170px;
    background: white;
    margin-top: 15px;
    p{
        margin-left: 10px;
        line-height: 25px;
    }
}
.btn{
    width: 100%;
    height: 30px;
    outline: none;
    background: #EB6100;
    color: white;
    border: none;
}
</style>